Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add delete button to recipe image modal #4708

Draft
wants to merge 9 commits into
base: mealie-next
Choose a base branch
from

Conversation

Tomnowell
Copy link

@Tomnowell Tomnowell commented Dec 11, 2024

What type of PR is this

  • feature

What this PR does / why we need it:

Currently there is no way to delete an image for a recipe once it has been uploaded (although uploading/scraping a new image will replace the current image). This PR adds a way to remove an image that has been uploaded or scraped.

Files changed:

  • frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
    Increase the width of the modal and add the delete button emit a delete event.

  • frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
    Call the API to delete.

  • frontend/lib/api/user/recipes/recipe.ts
    Handle response.

  • mealie/repos/repository_recipes.py
    Update the repository.

  • mealie/routes/recipe/recipe_crud_routes.py
    Add new CRUD route to add delete functionality.

  • mealie/services/recipe/recipe_data_service.py
    Add data service function to delete the image.

Before:
image

After:
Screenshot from 2024-12-11 12-15-22

Which issue(s) this PR fixes:

Fixes #4595

Special notes for your reviewer:

This is my first ever PR on a public project! Sorry for all the errors! Please let me know where I can do better!

Testing

Manual testing through the UI

@Tomnowell Tomnowell marked this pull request as ready for review December 12, 2024 13:16
Copy link
Collaborator

@michael-genson michael-genson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like when the image is deleted the page doesn't react. For example, try uploading a tall image and then deleting it. The page should shrink since there's no image, but it doesn't shrink until the page refreshes.

Otherwise looks great!

@@ -22,6 +22,10 @@
:post="false"
@uploaded="uploadImage"
/>
<v-btn class="ml-2" color="error" :loading="loading" :disabled="!slug" @click="deleteImage">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we disable this button if there's no image?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! Will do :D

try:
shutil.rmtree(image_dir)
except Exception as e:
self.logger.exception(f"Failed to delete image data: {e}")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can leave off the exception, logger.exception already logs the full traceback

Suggested change
self.logger.exception(f"Failed to delete image data: {e}")
self.logger.exception(f"Failed to delete image data")

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!👍

@ChipSkylark37
Copy link
Contributor

+1 Would love to see this get fixed up and merged in. Anywhere there is an image in the UI, I would expect to be able to delete it.

@Tomnowell Tomnowell marked this pull request as draft January 22, 2025 13:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] - No option to remove an image from a recipe
3 participants